<template>
  <div class="ssqOpenList">
  <div class="maincontent " >
    <div class="guide bread-crumbs-guide">
      <span>您当前位置：</span> 
      <a href="/index.html">海豚彩票</a> <span>&gt;</span> 
      <a href="/kaijiang/">全国彩票开奖</a> 
      <span>&gt;</span> 
      <a><span>双色球</span>开奖信息</a>
    </div>
    <div class="results" style="margin-bottom: 10px;overflow: hidden;">
      <div class="kinds-menu">
        <div class="title">全部彩种</div>
        <h3><img :src="row_gp">全部彩种</h3>
        <ul>
          <li><router-link to="/kaijiang/ssqOpenList">双色球</router-link></li>
          <li><router-link to="/kaijiang/cqSscOpenList" class="current">重庆时时彩</router-link></li> 
          <li><a href="/kaijiang/sanfencai.html">乐彩三分彩</a></li> 
          <li><a href="/kaijiang/wufencai.html">乐彩五分彩</a></li> 
          <li><a href="/kaijiang/gd115.html">广东11选5</a></li> 
          <li><a href="/kaijiang/bjlu28.html">北京幸运28</a></li> 
          <li><a href="/kaijiang/cndlu28.html">加拿大28</a></li> 
          <li><a href="/kaijiang/niuniu.html">欢乐牛牛</a></li> 
        </ul>
      </div>
      <div class="data-box">
        <div class="info">
          <img :src="kj_cqSsc" alt="重庆时时彩开奖信息"> 
          <span>[参与人数最多的彩种2元赢取1000万！]</span>
        </div>
        <div class="history">
          <table>
            <caption>历史开奖</caption> 
            <thead><tr><th>期号</th> <th>时间</th> <th>号码</th></tr></thead>
            <tbody id="kindsopenlist" v-for="item in items">
            <tr>
              <td>第{{item.sessionNo}}期</td>
              <td>{{item.openTime}}</td>
              <td>
                <div class="open-number">
                  <span class="num" v-for="(ball,index) in item.resultItems" v-bind:class="ballColor('13',index)">{{ball}}
                  </span>
                </div>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
        <div class="pager" v-if="this.items.length > 0">
          <a class="first" v-on:click="first(0)">首页</a> 
          <a class="prev" v-on:click="first(query.pageIndex-1)">上一页</a> 
          <a class="next" v-on:click="first(query.pageIndex+1)">下一页</a> 
          <a class="last" v-on:click="first(pageNumber-1)">末页</a> 
          <span class="gray">当前第<span id="nowpage">{{query.pageIndex+1}}</span>页，总共有<span id="toatlpage">{{pageNumber}}</span>页，<span id="totalnum">{{total}}</span>条记录，每页<span id="pageSize">{{pageSize}}</span>条</span> 
        </div>
      </div>
    </div>
  </div>
  </div>
</template>

<script>
import {baseObj} from '../util/util'
export default {
  name: 'ssqOpenList',
  data () {
    return {
      kj_cqSsc: '../../static/images/static/kj_cqSsc.gif',
      row_gp: '../../static/images/static/row_gp.gif',//全部彩种
      items: [],//开奖列表
      query: { //查询条件对象
        guarantees: '',//保底
        pageIndex: 0,//页码
      },
      pageSize: 10,//每页数量
      total: 0,//总共数量
    }
  },
  methods: {
    //双色球排列样式
    ballColor:function(e,i){
      if ("13"=== e && 6 === i) {
        console.log(6 === i);
        return "bg-blue"
      }else{
        return "bg-red"
      }
    },
    openList: function(){
      var map = {};
      map['pageIndex'] = this.query.pageIndex;
      map['pageSize'] = this.pageSize;
      var mw=baseObj.mw(map);
      this.$http.get('api/api/cqSsc_openList',{
        params: {
          mw: mw
        }
      }).then((response) => {
        console.log(response.data.code);
        var code = response.data.code;
        if ( '200'=== code ) {
          var result = response.data.data;
          this.items = result.items;
          this.pageSize = result.pageSize;
          this.query.pageIndex = result.pageIndex;
          this.total = result.total;
        }else if('404' === code){
          var result = response.data.data;
          this.items = [];
          this.total = 0;
        }
      })
    },
    //首页,上一页或者下一页,最后一页等
    first: function(index){
      if(index < 0){
        index = 0;
      }else if(index > this.pageNumber-1){
        index = this.pageNumber-1;
      }
      this.query.pageIndex = index;
    }
  },
  computed: {
    //计算总共有多少页
    pageNumber: function(){
      return  Math.ceil(this.total/this.pageSize);
    },

  },
  watch: {
    // 如果 `query` 发生改变，这个函数就会运行.
    // 为了发现对象内部值的变化，可以在选项参数中指定 deep: true
    'query': {
      handler: function(){
        this.openList();
      },
      deep:true
    }
  },
  created:function() {
    this.openList();
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@CHARSET "UTF-8";
.results {}
.results .caption { color: #333;background: #fcfcfc;font-size: 14px;text-indent: 5px;line-height: 35px;text-align: left;border-bottom: 1px solid #ba2636;}
.results table {width: 100%;border-spacing: 0;}
.results thead tr th:nth-last-child(1) {width: 90px;}
.results thead tr th {border-bottom: 1px solid #ebedec;color: #717171;}
.results thead tr th:nth-child(1) {width: 55px;}
.results thead tr th:nth-child(2) {width: 100px;}
.results thead tr th:nth-child(3) {width: 120px;}
.results thead tr th:nth-child(4) {width: 160px;}
.results thead tr th:nth-last-child(1) {width: 90px;}
.results thead tr th:nth-last-child(2) {width: 50px;}
.results thead tr th:nth-last-child(3) {width: 160px;}
.results tbody tr td {border-bottom: 1px dotted #ddd;color: #717171;}
.results .ball {background: #e60000;color: white;}
.results .ball.blue {background: #3e8be7;}
.results .ball.yellow {background: #ff8e33;}

.results thead tr th {text-align: center;line-height: 40px;font-weight: normal;border-bottom: 1px solid #ebedec; color: #717171;}
.results tbody tr td {border-bottom: 1px dotted #ddd;color: #717171;text-align: center;line-height: 50px;vertical-align: middle;}
.results tbody tr td.balls .open-number{text-align: left;} 
.results tbody tr td .open-number{text-align: center; height: 25px;line-height: 25px;}
.results tbody tr td .open-number .symbol{line-height: 20px;}
.results tbody tr td.kinds-logo img{width: 40px;display: block;margin-left: 10px;}
.results table tbody:last-child tr:last-child td {border-bottom: none;}

.kinds-menu {width: 190px;float: left;border: 1px solid#bc2218;}
.kinds-menu .title{height: 32px;line-height: 32px;background-color:#E92433;color: #fff;padding-left: 10px;}
.kinds-menu h3 {background: url(../../static/images/static/lottery_category_bg.gif) 0 0 no-repeat;width: 180px;height: 24px;line-height: 24px;text-indent: 5px;margin: 10px auto;font-size: 13px;}
.kinds-menu h3 * {vertical-align: middle;margin-right: 5px;}
.kinds-menu ul {margin: 10px 0 10px 30px;padding: 0;}
.kinds-menu ul li {background: url(../../static/images/li_row01.gif) left center no-repeat;list-style: none;margin: 0;line-height: 2.0em;padding-left: 15px;}
.kinds-menu ul li a:hover {color: #e60012;}
.kinds-menu ul li a.current{color: #f00;}

.results .data-box {width: 790px;float: right;background: url(../../static/images/kjxq_box02_bg.jpg) left top repeat-x;border: #cccccc 1px solid;padding: 0px 14px 8px 14px;margin-bottom: 10px;}
.results .data-box{}
.results .data-box .info {border-bottom: #CCCCCC 1px dashed;padding: 3px 0px 5px 0px;margin-bottom: 20px;}
.results .data-box .info img {height: 45px;}
.results .data-box .info span {top: -10px;position: relative;margin-left: 10px;}


.history table {border-collapse: inherit;border-spacing: 1px;background: #cccccc;font-size: 12px;width: 550px;margin: 0 auto 10px;}
.history table caption {line-height: 30px;text-align: left;border-width: 1px 1px 0 1px;border-style: solid;border-color: #ccc;text-indent: 10px;background: #f5f5f5;}
.history table thead tr th {line-height: 30px;font-weight: normal;background: #f5f5f5;}
.history table tbody tr td {border-bottom: none;color: #333333;background: white;padding: 5px;line-height: 19px;text-align: center;}
.history thead tr th:nth-last-child(3) {width: 80px;}
</style>